require(['./config'], () => {
    require(['template', 'zoom', 'fly', 'header', 'footer'], (template, zoom, fly, header) => {
        class Detail {
            constructor() {
                this.render().then(() => {
                    this.zoom();
                    this.addToCart();
                    this.toTop();
                    this.changeBtn();
                });
            }
            render() {
                const id = location.search.slice(4);
                return new Promise((resolve, reject) => {
                    $.get(`http://www.xiongmaoyouxuan.com/api/detail?id=${id}`, resp => {
                        if (resp.code === 200) {
                            console.log(resp);
                            const {
                                photo,
                                price,
                                originPrice,
                                saleNum,
                                tbOriginPrice,
                                title,
                                itemId,
                                commission,
                                id,
                                coupon,
                                image,
                                descContentList
                            } = resp.data.detail;
                            this.detail = {
                                photo: photo.slice(0, 4),
                                price: parseInt((originPrice * commission) / 10),
                                originPrice,
                                saleNum,
                                tbOriginPrice: parseInt(tbOriginPrice),
                                title,
                                itemId: parseInt(itemId / 1000),
                                commission: parseInt(commission),
                                id,
                                coupon,
                                image,
                                descContentList: descContentList.slice(0, 8)
                            };
                            $('#wrap').html(template('detailTmplate', {
                                ...this.detail
                            }))
                            $('#moreImg').html(template('moreImgTemplate', {
                                ...this.detail
                            }))
                            $('#info').html(template('detailTmplateAdd', {
                                ...this.detail
                            }))
                        }
                        resolve()
                    })
                })
            }
            zoom() {
                $('.zoom-image').elevateZoom({
                    gallery: 'gall'
                })
            }
            fly(e) {
                var offset = $('#addNum').offset();//shopcarfly
                // console.log(offset);
                var flyer = $('<div class="flybox"></div>');
                flyer.fly({
                    start: {
                        left: e.clientX,//抛物体起点横坐标   
                        top: e.clientY, //抛物体起点纵坐标
                    },
                    end: {
                        left: offset.left + 10,//抛物体终点横坐标   
                        top: offset.top + 10 - $(document).scrollTop(), //抛物体终点纵坐标 
                        // width: 100, //结束时高度
                        // height: 100, //结束时高度  
                    },
                    onEnd: function () {
                        this.destroy()
                        header.calcCartCount();
                    }
                })

            }
            addToCart() {
                // 加入购物车
                // 使用localStorage来存
                $('#add-to-cart-btn').on('click', (e) => {
                    var num = $('#paynum').val();
                    this.fly(e);
                    // 先取
                    let cart = localStorage.getItem('cart')
                    // 判断是否存在数据
                    if (cart) {
                        // 购物车已经有数据
                        cart = JSON.parse(cart)
                        // 判断购物车里是否已经存在当前数据
                        const isExist = cart.some(shop => {
                            return shop.id === this.detail.id
                        })
                        if (isExist) {
                            // 当前数据在购物车里已存在，只需要把数量加加即可
                            cart = cart.map(shop => {
                                if (shop.id === this.detail.id) shop.count += Number(num)
                                // 无论是否满足if条件都需要return
                                return shop
                            })
                        } else {
                            // 数据不存在，就push，默认数量为1,check也就是选中状态为true
                            cart.push({ ...this.detail, count: Number(num), check: true })
                        }
                        // 无论数据是否存在，都要把修改好的cart重新存入localStorage
                        localStorage.setItem('cart', JSON.stringify(cart))
                    } else {
                        // 购物车为空
                        // 存一个数组，这个数组里只有this.detail这一条数据
                        // 在存详情数据的时候再加一个默认数量count为1
                        // 默认check也就是选中状态为true
                        localStorage.setItem('cart', JSON.stringify([{
                            ...this.detail,
                            count: Number(num),
                            check: true
                        }]))
                    }

                    // JSON.parse(localStorage.getItem('cart')).forEach((item) => {
                    //     $('#addNum').html(item.count);
                    // })

                })
            }
            toTop() {
                $(window).on('scroll',()=>{
                  const scroll=$(document).scrollTop();
                  if(scroll>300){
                    $('#to-top').show();
                  }else{
                    $('#to-top').hide();
                  }
                //   console.log(scroll)
                })
                $('#to-top').on('click', () => {
                  $('body,html').animate({ scrollTop: 0 }, 500)
                })
              }
            changeBtn() {
                $('.reduce').on('click', () => {
                    if ($('#paynum').val() - 0 <= 1) {
                        $('#paynum').val(1);
                    } else {
                        $('#paynum').val($('#paynum').val() - 0 - 1);
                    }
                })
                $('.add').on('click', () => {
                    $('#paynum').val($('#paynum').val() - 0 + 1);
                })
            }
        }
        new Detail()
    })
})